<template>
	<view class="">
	<view class="login">
		<view class="user">用 户 登 录</view>
		<view class="up">
		<form v-model="userdata" @submit="submit" >
			<input type="text" placeholder="账户" v-model="userdata.UserAccount"  name="username" />
			<input password="true" placeholder="密码" v-model="userdata.password"   name="password" />
			<button type="primary" form-type="submit" >登 录</button>
		</form>
		</view>
		<view class="zc">
			<text @click="reg">如果没有账号请先创建账号...</text>
		</view>
	</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				userdata:{
					UserAccount:'',
					password:''
				}
			}
		},
		
		methods:{	
			reg:function(){
				uni.redirectTo({
					url:"../Reg/reg"
				})
			},
			submit(){
			console.log(this.userdata)
				uniCloud.callFunction({
					name:"login",
					data:this.userdata,
					success: (res) => {
						console.log(res)
						if(res.result.affectedDocs==0){
							uni.showModal({
								content:"用户名或密码错误，请重新登录！",
								showCancel:false
							})
						}else{
							uni.setStorageSync("UserAccount",this.userdata.UserAccount);
							uni.reLaunch({
								url:"../FriendInfo/FriendInfo"
							})
						}
					}
				})		
				},
		}
	}
</script>

<style>
	.login{
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 200upx;
	}
	.user{
		color: #868d85;
		font-size: 50upx;
		font-weight: bold;
		margin-bottom: 30upx;
		
	}
	input{
		background-color: #fdfafa;
		border: 4upx solid #8baa84 ;
		height: 80upx;
		width: 500upx;
		border-radius: 30upx;
		padding-left: 20upx;
		margin-bottom: 20upx;
	}
	button{
		background-color: #a1cc91;
	}
	.zc{
		border-bottom: 4upx solid #00aa7f;
		color: #737651;
		font-size: 30upx;
		display: inline-block;
		margin-top: 30upx;
		margin-left: 230upx;
	}
</style>
